<!--
 * @Author: licongwei
 * @Date: 2022-03-07 16:32:57
 * @Description: 文件描述
-->
<template>
  <div class="app-box" :style="state.boxStyle">
    <img class="main-bg" src="@/assets/images/main-bg.png" alt="" />
    <div class="common-wrap">
      <el-config-provider :locale="zhCn">
        <router-view v-slot="{ Component }">
          <transition name="opa-fade">
            <component
              class="views"
              :style="{
                transform: `scale(${state.zoom})`
              }"
              :is="Component"
            />
          </transition>
        </router-view>
      </el-config-provider>
    </div>
    <starsSky />
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import starsSky from '@/components/starsSky/starsSky.vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ElMessage } from 'element-plus'

const state: any = reactive({
  zoom: 1,
  zoomY: 1,
  boxStyle: {}
})
const cssZoom: any = ref('scale(1)')
const globalHeight = document.documentElement.clientHeight
const globalWidth = document.documentElement.clientWidth
state.zoom = globalHeight / 1080
const BoxWidth = 1950 * state.zoomY
console.log('state.zoom', state.zoom)
if (state.zoom < 1) {
  state.boxStyle = {
    transform: `translateX(-50%) translateX(${BoxWidth / 2}px) translateX(${
      (globalWidth - BoxWidth) / 2
    }px)`
  }
} else {
  state.boxStyle = {}
}

document
  .getElementsByTagName('body')[0]
  .style.setProperty('--scale', state.zoom)
</script>
<style lang="less">
.app-box {
  min-width: 1920px;
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.common-wrap {
  position: relative;
  width: 1920px;
  height: 1080px;
  display: flex;
  align-items: center;
  justify-content: center;

  > .views {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
  }
}
</style>
